<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/font-awesome.min.css">
    <script src="./book.js"></script>
    <style>
        body {
            background-color: rgb(244, 245, 247);
        }

        .book_img {
            height: 360px;
            background-color: #fff;
        }

        .book_img img {
            width: 100%;
        }

        .introduce {
            height: 210px;
            background-color: #fff;
            padding-left: 10px;
        }

        .recommend_box {
            height: 30px;
            display: flex;
            line-height: 30px;
            margin: 10px 0;
            padding-top: 10px;
        }

        .recommend {
            font-size: 14px;
            width: 80px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            color: white;
            background-color: red;
            border-radius: 15px;
            margin-top: 5px;
        }

        .recommend_box .book_name {
            font-size: 22px;
            color: #000;
        }

        .author {
            font-size: 14px;
            margin-bottom: 10px;
        }

        .book_text {
            margin: 0;
            color: rgb(180, 166, 150);
            font-size: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }

        .now_price {
            font-size: 14px;
            color: red;
        }

        .now_price {
            margin: 10px 0 5px 0;
        }

        .now_price span {
            font-size: 20px;
        }

        .old_price {
            color: rgb(180, 166, 150);
            font-size: 14px;
        }

        .detailed_img {
            height: 3420px;
        }

        .detailed_img img {
            margin-top: 10px;
            width: 100%;
        }

        footer {
            height: 55px;
            position: fixed;
            bottom: 0;
            background-color: #fff;
            width: 100%;
        }

        .foot {
            display: flex;
        }

        .foot1,
        .foot2,
        .foot3 {
            font-size: 14px;
            display: flex;
            flex-direction: column;
            text-align: center;
            margin-top: 10px;
            flex-grow: 1;
        }

        .fa {
            font-size: 18px;
        }

        .add {
            width: 230px;
            border: none;
            background-color: rgb(25, 137, 250);
            color: #fff;
            border-radius: 30px;
            margin-top: 5px;
            font-size: 16px;
        }

        a {
            text-decoration: none;
            color: #000;
        }
    </style>
</head>

<body>
    <div class="book_box">
        <!-- <div class="book_img">
            <img src="http://img3m2.ddimg.cn/1/6/29239552-1_w_18.jpg" alt="">
        </div>
        <div class="introduce">
            <div class="recommend_box">
                <div class="recommend">聚星推荐</div>
                <div class="book_name">《字母》</div>
            </div>
            <div class="author">作者: 大山诚一郎 Oyama Seiichiro</div>
            <div class="book_text">
                当你隐隐觉得不对劲，致命的恶意正悄悄逼近！一座神秘的公寓，不定期举行推理合战。红茶、曲奇，搭配寒意逼人的谜案，与案件相关的字母似乎是重要线索。一群特殊的房客，联手组成侦探团，秘密追踪警视厅也难以锁定的幕后真凶。有被毒妄想的贵妇人，竟应验般惨遭毒杀？午夜零点神秘来电后，美术馆密室惊现死尸。豪华游轮杀人现场，诡异的死亡留言无人能解。绑架案中遇害幼童父亲的手记，字里行间令人细思极恐……越细微的异常，越接近真相，也越令人不寒而栗！
            </div>
            <div class="now_price">现价：￥<span>32.00</span></div>
            <del class="old_price">原价：￥42.00</del>
        </div>
        <div class="detailed_img">
            <img src="http://img56.ddimg.cn/99999990298868376.jpg" alt="">
        </div> -->
    </div>
    <footer>
        <div class="foot">
            <div class="foot1">
                <i class="fa fa-commenting-o"></i>客服
            </div>
            <div class="foot2">
                <i class="fa fa-shopping-cart"></i><a href="./Shopping.html">购物车</a>
            </div>
            <div class="foot3">
                <i class="fa fa-shopping-bag"></i>店铺
            </div>
            <button class="add">加入购物车</button>
        </div>
    </footer>
</body>
<script>
    const box = document.querySelector('.book_box')
    const [{ id, bookName, originalPrice, presentPrice, content, thumbSrc, detailSrc, author }] = books
    const getId = location.search.split('?id=')[1] - 1
    box.innerHTML = `
        <div class="book_img">
            <img src=${books[getId].thumbSrc} alt="">
        </div>
        <div class="introduce">
            <div class="recommend_box">
                <div class="recommend">聚星推荐</div>
                <div class="book_name">《${books[getId].bookName}》</div>
            </div>
            <div class="author">作者: ${books[getId].author}</div>
            <div class="book_text">
                ${books[getId].content}
            </div>
            <div class="now_price">现价：￥<span>${books[getId].presentPrice}</span></div>
            <del class="old_price">原价：￥${books[getId].originalPrice}</del>
        </div>
        <div class="detailed_img">
            <img src=${books[getId].detailSrc} alt="">
        </div>
    `

    const add = document.querySelector('.add')

    // var data = [JSON.parse(localStorage.getItem("datas"))];
    // localStorage.setItem("datas", JSON.stringify(data));
    // var data = JSON.parse(localStorage.getItem("datas"));
    // add.addEventListener('click', function () {
    // localStorage.setItem("dataId", JSON.parse(getId))
    // data.push(getId);
    // localStorage.setItem("datas", JSON.stringify(data));

    // })
    var data = [{ id: getId }];
    // localStorage.setItem("items", JSON.stringify(data));
    var data = JSON.parse(localStorage.getItem("items"));
    localStorage.setItem("items", JSON.stringify(data));
    add.addEventListener('click', function () {
        data.push({ id: getId });
        localStorage.setItem("items", JSON.stringify(data));
    })
</script>

</html>